<template>
	<view class="head">
		<!-- 轮播图 -->
		<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			indicator-color="#fff" indicator-active-color="#ff6700">
			<swiper-item v-for="(item,index) in lunboList" :key="index">
				<view class="swiper-item">
					<image style="width: 100%;" :src="item.url" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 公交路线搜索-->
		<uni-search-bar @confirm=" searchCityBus" placeholder="输入查询的公交路线" @input="" v-model="searchKey" />

		<!-- 分类导航 -->
		<uni-section class="mb-10" title="分类" type="line" style="border-radius: 10px; height: 111px;">
			<view class="nav" style="height: 80px;">
				<uni-grid :show-border="false" :column="6" @change="changeGrid">
					<uni-grid-item v-for="(item,index) in gridData" :index="index">
						<!-- @tap="toMovie(item.id),toStar(item.id)" -->
						<view class="grid-item-box" style="background-color: #fff;">
							<img style="height: 50rpx; width: 50rpx;" :src="item.icon" alt="" />
							<text class="text" style="font-size: 10px;">{{item.title}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</uni-section>

		<!-- 实时天气 -->
		<view class="weather"
			style="height: 100rpx;border: 1px solid #ccc;margin: 5px; border-radius: 10px;display: flex;justify-content: space-between; padding: 10rpx;align-items: center;">
			<view class="icon" style="width: 100rpx;height: 100rpx; ">
				<image style="width: 100%;height: 100%;" :src="'/static/icons/'+ weatherNow.icon +'.svg'" mode="">
				</image>
			</view>
			<view class="text" style="font-size: 50rpx;margin-left: 10px;">
				{{weatherNow.temp}}°C
			</view>
			<view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
				{{weatherNow.text}}
			</view>
			<view class="text" style=" margin-left: 10rpx;">
				{{weatherNow.windDir}} {{weatherNow.windScale}}级
			</view>icon
			<view>
				<view class="text" style="margin-left: 10rpx;">
					体感温度： {{weatherNow.feelsLike }}°C
				</view>
				<view class="text" style="margin-left: 10rpx;">
					湿度： {{weatherNow.humidity }}%
				</view>
			</view>
		</view>


		<button type="default" @tap="showme">我在那里</button>
		
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		CONFIG
	} from '../../utils/config'
	import {
		userStore
	} from '../../store/userStore'

	let store = userStore()
	onLoad(() => {
		getLunbo()
		searchCityBus()
		getWeather()
		getPos()
	})
	let lunboList = ref([])
	async function getLunbo() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/lunbo")
		console.log(res)
		lunboList.value = res.results
	}

	let searchKey = ref("")

	function searchCityBus() {
		if (searchKey.value == "") {
			uni.showToast({
				title: "请输入搜索线路名称",
				icon: "none"
			})
		} else {
			let url = `https://uri.amap.com/line?name=601&city=029&src=mypage&callnative=0`
			window.location.href = url
		}
	}
	let weatherNow = ref({})
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		})
		if (res.code == 200) {
			weatherNow.value = res.now
			console.log(res.now)
		}
	}

	let gridData = [{
			title: '热映电影',
			icon: 'static/icon/dy.png'
		},
		{
			title: '微博热搜',
			icon: 'static/icon/weibo.png'
		},
		{
			title: '每日运势',
			icon: 'static/icon/jinri.png'
		},
		{
			title: '天气预报',
			icon: 'static/icon/tq.png'
		},
		{
			title: '查询路线',
			icon: 'static/icon/che.png'
		},
		{
			title: '收藏',
			icon: 'static/icon/sc.png'
		}

	]

	// // 跳转到详情页面
	// function toMovie(id=1){
	// 	uni.navigateTo({
	// 		url:`/pages/movie/movie?id=${id}`
	// 	})
	// }
	// // 跳转到详情页面
	// function toStar(id=2){
	// 	uni.navigateTo({
	// 		url:`/pages/star/star?id=${id}`
	// 	})
	// }

	// 获取当前地点坐标
	// 获取当前地点坐标
	function getPos() {
		uni.getLocation({
			success: function(res) {
				// console.log('当前位置的经度：' + res.longitude);
				// console.log('当前位置的纬度：' + res.latitude);
				// 将定位保存到状态库
				store.setPos(res.latitude, res.longitude)
				console.log(store.currentPos)
			}
		});
	}

	function showme() {
		uni.navigateTo({
			url: "/pages/mywebView/mywebView?type=1"
		})
	}


	// 页面跳转
	function changeGrid(e) {
		let index = e.detail.index
		console.log(index)
		switch (index) {
			case 0:
				uni.navigateTo({
					url: "/pages/movie/movie"
				})
				break;
			case 1:
				uni.navigateTo({
					url: "/pages/weibo/weibo"
				})
				break;
			case 2:
				uni.navigateTo({
					url: "/pages/everyday/everyday"
				})
				break;
			case 3:
				uni.navigateTo({
					url: "/pages/weather/weather"
				})
				break;
		}

	}
</script>Movie

<style scoped>
	.head {
		padding: 10px;
		background-color: #f4f4f4;
		/* 背景颜色 */
	}

	.nav {
		margin-top: 10px;
		/* 为导航区域添加上下间距 */
	}

	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15rpx;
		border-radius: 8px;
		/* 圆角 */
		background-color: #fff;
		/* 背景颜色 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		transition: transform 0.3s;
		/* 增加动画效果 */
	}

	.grid-item-box:hover {
		transform: translateY(-2px);
		/* 悬停效果 */
	}

	.grid-item-box .text {
		margin-top: 5px;
		/* 文本与图片之间的间距 */
		font-size: 15px;
		/* 统一字体大小 */
		color: #333;
		/* 字体颜色 */
	}

	.swiper {
		margin-top: 15px;
		/* 轮播图与上面元素的间距 */
	}

	.weather {
		margin-top: 15px;
		/* 天气信息模块的上间距 */
		border-radius: 10px;
		/* 圆角 */
		background-color: #fff;
		/* 背景颜色 */

		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 平均分配空间 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.weather .icon {
		width: 80rpx;
		/* 固定宽度 */
		height: 80rpx;
		/* 固定高度 */
	}

	.weather .text {
		color: #444;
		/* 字体颜色 */
	}

	/* 适应屏幕大小的自适应字体 */
	@media (max-width: 600px) {
		.weather .text {
			font-size: 28rpx;
			/* 小屏幕字体大小 */
		}
	}
</style>